<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Counter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />

    <style data-tag="reset-style-sheet">
        /* Resets the default browser styling for various HTML elements */
        html { line-height: 1.15;}
        body { margin: 0;}
        * { box-sizing: border-box; border-width: 0; border-style: solid;}
        p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption { margin: 0; padding: 0;}
        button { background-color: transparent;}
        button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}
        /* More reset styles follow */
      </style>
  
      <style data-tag="default-style-sheet">
        html {
          font-family: Arial;
          font-size: 16px;
        }
  
        body {
          font-weight: 400;
          font-style:normal;
          text-decoration: none;
          text-transform: none;
          letter-spacing: normal;
          line-height: 1.15;
          color: var(--dl-color-theme-neutral-dark);
          background: var(--dl-color-theme-neutral-light);
  
          fill: var(--dl-color-theme-neutral-dark);
        }
      </style>
  
    </head>
    
  <body>
    <link rel="stylesheet" href="modes.css" />
    <div>
      <link href="Counter.css" rel="stylesheet" />

      <div class="counter-container10">
        <div class="counter-container11">
          <span class="counter-text10">
            <span>ESP8266 Counter</span>
            <br />
          </span>
        </div>
        <div class="counter-container12">
          <h2 class="counter-text13 thq-heading-2">Counter</h2>
        </div>

        <div class="counter-container13">
            <div id="plusButtons" class="counter-container14">
                <button type="button" class="button addButton" button-value="1">+ 1</button>
                <button type="button" class="button addButton" button-value="10">+ 10</button>
                <button type="button" class="button addButton" button-value="100">+ 100</button>
                <button type="button" class="button addButton" button-value="1000">+ 1,000</button>
                <button type="button" class="button addButton" button-value="10000">+ 10,000</button>
                <button type="button" class="button addButton" button-value="100000">+ 100,000</button>
                <button type="button" class="button addButton" button-value="1000000">+ 1,000,000</button>
                <button type="button" class="button addButton" button-value="10000000">+ 10,000,000</button>
            </div>
              
            <div id="minusButtons" class="counter-container15">
                <button type="button" class="button subtractButton" button-value="-1">- 1</button>
                <button type="button" class="button subtractButton" button-value="-10">- 10</button>
                <button type="button" class="button subtractButton" button-value="-100">- 100</button>
                <button type="button" class="button subtractButton" button-value="-1000">- 1,000</button>
                <button type="button" class="button subtractButton" button-value="-10000">- 10,000</button>
                <button type="button" class="button subtractButton" button-value="-100000">- 100,000</button>
                <button type="button" class="button subtractButton" button-value="-1000000">- 1,000,000</button>
                <button type="button" class="button subtractButton" button-value="-10000000">- 10,000,000</button>
            </div>
        </div>
        <div class="counter-container16">
          <div class="counter-container17">
            <span class="counter-text29">
              <span>Custom Amount</span>
              <br />
            </span>
          </div>
          <div class="counter-container18">
            <input
              type="text"
              placeholder="Enter a positive integer"
              required="true"
              id="inputField"
              class="counter-textinput input"
              maxlength="10"
            />
          </div>
          <div class="counter-container19">
            <button type="button" id="addButton" class="counter-button26 button submitButton">Add</button>
            <button type="button" id="subtractButton" class="counter-button27 button submitButton">Subtract</button>
          </div>
        </div>
        <div class="counter-container20">
          <span class="counter-text33">Group ID:&nbsp;</span>
          <span id="groupID-text" class="counter-text34">Error</span>
        </div>
      </div>
    </div>

    <script type="module" src="Counter.js"></script>
  </body>
</html>
